<template>
    <div class="common-layout">
      <el-container>
        <el-main>

        <el-row>
            <el-col :span="8">
                <el-text> 数量：{{ state.data.length }} </el-text>
            </el-col>
        </el-row>

            <el-table :data="state.data" height="700" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            @cell-click="industryClick"
            :default-sort="state.sort"
            style="width: 100%">
                <el-table-column prop="stock" label="股票" width="120">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="category" label="类别" 
                    :filter-method="filterCategory"
                    :filters="[
                        { text: '股票', value: '股票' },
                        { text: 'ETF', value: 'ETF' },
                        { text: '指数', value: '指数' },
                    ]"
                />
                <el-table-column prop="wg" label="吾股" sortable width="100"/>
                <el-table-column prop="levelPoint" label="分位点" sortable width="100"/>
                <el-table-column prop="industry" label="行业" sortable width="100"/>
                <el-table-column prop="deCount" label="连续下跌" sortable  width="100"/>
                <el-table-column prop="y2025" label="2025" sortable />
                <el-table-column prop="y2024" label="2024" sortable />
                <el-table-column prop="y2023" label="2023" sortable />
                <el-table-column prop="y2022" label="2022" sortable />
                <el-table-column prop="y2021" label="2021" sortable />
                <el-table-column prop="y2020" label="2020" sortable />
                <el-table-column prop="y2019" label="2019" sortable />
                <el-table-column prop="y2018" label="2018" sortable />
                <el-table-column prop="y2017" label="2017" sortable />
                <el-table-column prop="y2016" label="2016" sortable />
                <el-table-column prop="y2015" label="2015" sortable />

            </el-table>
        </el-main>
      </el-container>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ToStockDetail from './ToStockDetail.vue';
import { getLpClassName, getSessionStorage, setSessionStorage, getIndexName } from '../utils/help';
import { getMultiYearData } from '../service/year';

const baseKey = "yearPctStat"
const selectKey = baseKey + "Select"
const sortPropKey = "yearPctSortProp"
const sortOrderKey = "yearPctSortOrder"

const prop = defineProps({
    stocks: String
})

const state = reactive({
    rawData: [],
    data: [],
    sort: { 
        prop: getSessionStorage(sortPropKey) || '' , 
        order: getSessionStorage(sortOrderKey) || '' 
    }
})

getMultiYearData(prop.stocks).then( res => {
    state.rawData = res.data
    state.data = res.data
})

        const sortChange = (column, prop, order) => {
            setSessionStorage(sortPropKey, column.prop)
            setSessionStorage(sortOrderKey, column.order)
        }

        const industryClick = (row, column, cell, event) => {
            var columnProperty = column.property
            if (columnProperty == "industry") {
                // 还原
                if (state.selected === row.industry) {
                    state.selected = "全部"
                } else {
                    state.selected = row.industry
                }
                change()
            }
        }

        const filterCategory = (value, row) => {
            return row.category === value
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            if (columnProperty.startsWith('y')) {
                var pct = row[columnProperty]
                if (pct < 0) {
                    return 'pctlt0-cell'
                }
            }

            if (columnProperty === 'levelPoint') {
                return getLpClassName(row.levelPoint)
            }

            if (getIndexName().includes(row.stock)) {
                return 'lp-warning-row'
            }

            return ''
        }
</script>

<style>
</style>